.banner{
    width:100%;
    height: 603px;
    font-size: 0;
    position: relative;
}

#banner .banner-item{
    width: 100%;
    height: 603px;
    position: relative;
    top:0px;
    left: 0px;

}

#banner .banner-item>img{
    width: 100%;
    height: 603px;
    position: absolute;
    top:0px;
    left: 0px;
    object-fit: fill;
}

.item-nav{
    width:1200px;
    height: 603px;
    margin:0px auto;
    font-size: 0;
    position: relative;
}

.item-nav-left{
    width: 450px;
    height: 150px;
    position: absolute;
    top: 49%;
    left: 17%;
}
.item-nav-left-top{
    width:100%;
}
.item-nav-left-top a{
    width:170px;
    color:white;
    border:1px solid white;
    font-size: 25px;
    text-align: center;
    line-height: 55px;
    display: inline-block;
}
.item-nav-left-top a:hover{
    background: rgba(255,255,255,0.2);
    border:none !important;
}
.item-nav-left-top a:first-child{
    margin-right: 30px;
}
.item-nav-left-bottom{
    width:100%;
}
.item-nav-left-bottom p{
    margin:20px 0px;
    color:white;
    font-size: 20px;
}


.banner-goorder{
     width: 12%;
     height: 100px;
     position: absolute;
     top: 48%;
     left: 18%;
    z-index:111111;
 }

.banner-goorder1{
    width: 12%;
    height: 100px;
    position: absolute;
    top: 48%;
    left: 18%;
}

.banner-goorder2{
    width: 12%;
    height: 100px;
    position: absolute;
    top: 46%;
    left: 18%;
}

.banner-right2{
    width:633px;
    height: 393px;
    position: absolute;
    top:20px;
    right:0px;
    background: url("../../images/home_img/banner-right.png")no-repeat center;
    background-size: contain;
    animation: myfirst 1s;
    -moz-animation: myfirst 1s;	/* Firefox */
    -webkit-animation: myfirst 1s;	/* Safari 和 Chrome */
    -o-animation: myfirst 1s;	/* Opera */

}

.banner-right1{
    width:633px;
    height: 393px;
    position: absolute;
    top:20px;
    right:0px;
    background: url("../../images/home_img/banner-right1.png")no-repeat center;
    background-size: contain;
    animation: myfirst 1s;
    -moz-animation: myfirst 1s;	/* Firefox */
    -webkit-animation: myfirst 1s;	/* Safari 和 Chrome */
    -o-animation: myfirst 1s;	/* Opera */

}

.layui-carousel>[carousel-item]:before{
    font-size: 0px !important;
    display: none;
}

.banner-p-act{
    display: block !important;
}

.banner-right0{
    width:633px;
    height: 393px;
    position: absolute;
    top:20px;
    right:0px;
    background: url("../../images/home_img/banner-right2.png")no-repeat center;
    background-size: contain;
    animation: myfirst 1s;
    -moz-animation: myfirst 1s;	/* Firefox */
    -webkit-animation: myfirst 1s;	/* Safari 和 Chrome */
    -o-animation: myfirst 1s;	/* Opera */

}

.banner-title{
    width:100%;
    height: 50px;
    position: absolute;
    top:0px;
    left: 0px;
    background: rgba(51,51,51,.3);

    z-index:11
}
.banner-title a{display:inline-block;font-size:15px;color:#fff;line-height:50px;}

.banner-title div{
    width:1200px;
    height: 50px;
    margin:0px auto;
    font-size: 0;
    display: flex;
}

.banner-title div img{
    width:16px;
    height: 20px;
    margin-right: 5px;
    margin-top:15px;
    margin-left: 54px;
}

.banner-title div p{
    color:white;
    font-size: 15px;
    line-height: 50px;
    letter-spacing: 1px;
}

.banner-title div p a{
    color:white;
}

.banner-bottom{
    width:100%;
    height: 110px;
    position: absolute;
    bottom:0px;
    background: rgba(255,255,255,0.1);
    z-index:11111
}

.banner-bottom>div{

    width: 1180px;
    height: 110px;
    margin: 0 auto;
    font-size: 0;
}


.banner-bottom>div .banner-bottom-item{
    width: 295px;
    height: 110px;
    font-size: 0;
    display:table-cell;
    vertical-align:middle;
    text-align: center;
    /*overflow: hidden;*/
}

.banner-bottom-item a{
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.banner-bottom-item-img{
    display: inline-block;
    position: relative;
    float: left;
    margin-left: 20px;
}

.banner-bottom-item-img i{
    width:10px;
    height: 33px;
    display: inline-block;
}

.banner-bottom-item-img i img{
}



.distribution-img i img{
    transform:rotate(9deg);
    -ms-transform:rotate(9deg); /* Internet Explorer */
    -moz-transform:rotate(9deg); /* Firefox */
    -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
    -o-transform:rotate(9deg); /* Opera */
}

.distribution-img>img{
    width:68px;
    height: 36px;
}
.carry-img>img{
    width:52px;
    height: 42px;
}
.install-img>img{
    width:56px;
    height: 50px;
}
.maintain-img>img{
    width:52px;
    height: 42px;
}

.install i image{
    transform:rotate(9deg);
    -ms-transform:rotate(9deg); /* Internet Explorer */
    -moz-transform:rotate(9deg); /* Firefox */
    -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
    -o-transform:rotate(9deg); /* Opera */
}

.nth-left{
    position: absolute;
    top:27px;
    left: -10px;
}
.nth-right{
    position: absolute;
    top: -14px;
    left: 46px;
}
.nth1-left{
    position: absolute;
    top: 0px;
    left: -8px;
}
.nth1-right{
    position: absolute;
    top: -15px;
    left: 49px;
}
.nth2-left{
    position: absolute;
    top: 38px;
    left: -12px;
}
.nth2-right{
    position: absolute;
    top: -10px;
    left: 41px;
}
.nth2-right img{
    transform:rotate(2deg);
    -ms-transform:rotate(2deg); /* Internet Explorer */
    -moz-transform:rotate(2deg); /* Firefox */
    -webkit-transform:rotate(2deg); /* Safari 和 Chrome */
    -o-transform:rotate(2deg); /* Opera */
}
.nth3-left{
    position: absolute;
    top: 6px;
    left: -16px;
}
.nth3-right{
    position: absolute;
    top: 6px;
    left: 58px;
}

.nth3-right img{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* Internet Explorer */
    -moz-transform:rotate(180deg); /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg); /* Opera */
}
.bottom-item-font{
    width: 50%;
    display: inline-block;
    margin-left: 28px;
    float: left;
}
.bottom-item-font p{
    font-size: 17px;
    color:white;
    text-align: left;
    line-height: 20px;
}
.bottom-item-font .colorws{font-size: 12px;color:#fff;}
.item1 .item2{
    width: 295px;
    height: 110px;
    font-size: 0;
}
.item1 .distribution-img  .left{
    animation:nth-left 1.8s cubic-bezier(.455, .03, .515, .955);-webkit-animation-delay:0s
}
.item1 .distribution-img  .right{
    animation:nth-right 1.8s cubic-bezier(.455, .03, .515, .955);-webkit-animation-delay:0s
}
.item1 .install-img .left{
    animation:nth-left 1.8s cubic-bezier(.455, .03, .515, .955);-webkit-animation-delay:0s
}
.item1 .install-img  .right{
    animation:nth-right 1.8s cubic-bezier(.455, .03, .515, .955);-webkit-animation-delay:0s
}
.item1 .carry-img .left1{
    animation:nth-left1 1.8s cubic-bezier(.455, .03, .515, .955);-webkit-animation-delay:.2s
}
.item1 .carry-img .right1{
    animation:nth-right1 1.8s cubic-bezier(.455, .03, .515, .955);-webkit-animation-delay:0s
}
.item1 .maintain-img  .nth3-left{
    animation:nth-left2 1.8s cubic-bezier(.455, .03, .515, .955);-webkit-animation-delay:0s
}
.item1 .maintain-img  .nth3-right{
    animation:nth-right2 1.8s cubic-bezier(.455, .03, .515, .955);-webkit-animation-delay:0s
}
@keyframes nth-left{
    0%{transform:translate(0, 0) ;opacity:1}
    20%{transform:translate(-20px, -10px) ;opacity:0}
    40%{transform:translate(20px, 10px) ;opacity:0}
    70%{transform:translate(0, 0px) ;opacity:1}
    100%{transform:translate(0, 0px) ;opacity:1}
}
@keyframes nth-right{
    0%{transform:translate(0, 0) ;opacity:1}
    20%{transform:translate(14px, 10px) ;opacity:0}
    40%{transform:translate(-20px, -10px) ;opacity:0}
    70%{transform:translate(0, 0px) ;opacity:1}
    100%{transform:translate(0, 0px) ;opacity:1}
}
@keyframes nth-left1{
    0%{transform:translate(0, 0) ;opacity:1}
    20%{transform:translate(0px, -20px) ;opacity:0}
    40%{transform:translate(0px, 20px) ;opacity:0}
    70%{transform:translate(0, 0px) ;opacity:1}
    100%{transform:translate(0, 0px) ;opacity:1}
}
@keyframes nth-right1{
    0%{transform:translate(0, 0) ;opacity:1}
    20%{transform:translate(0px, -20px) ;opacity:0}
    40%{transform:translate(0px, 20px) ;opacity:0}
    70%{transform:translate(0, 0px) ;opacity:1}
    100%{transform:translate(0, 0px) ;opacity:1}
}
@keyframes nth-left2{
    0%{transform:translate(0, 0) ;opacity:1}
    20%{transform:translate(0px, -20px) ;opacity:0}
    40%{transform:translate(0px, 20px) ;opacity:0}
    70%{transform:translate(0, 0px) ;opacity:1}
    100%{transform:translate(0, 0px) ;opacity:1}
}
@keyframes nth-right2{
    0%{transform:translate(0, 0) ;opacity:1}
    20%{transform:translate(0px, 20px) ;opacity:0}
    40%{transform:translate(0px, -20px) ;opacity:0}
    70%{transform:translate(0, 0px) ;opacity:1}
    100%{transform:translate(0, 0px) ;opacity:1}
}

.layui-carousel-ind{
    display: none;
}

.layui-nav .layui-nav-item a {
    color: #3a3a3a;
}
.layui-nav .layui-nav-item a:hover {
    color: #3a3a3a;
}